<!DOCTYPE html>
<html>
<head>
    <title>i-admin-v1.0 后台管理系统 - 首页</title>
    <meta charset="UTF-8">
    <link href="static/css/bootstrap.css" rel="stylesheet"/>
</head>
<body>
<!--头部区域-->
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">i-admin-v1.0 后台管理系统</a>
        </div>
        <div>
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <span class="glyphicon glyphicon-user"></span>系统管理员<b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu">
                        <li>
                            <a href="#">个人信息</a>
                        </li>
                        <li>
                            <a href="#">修改密码</a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">退出</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>
<!--左侧 -->
<div class="col-md-2">
    <div class="list-group">
        <span class="list-group-item">
            系统菜单
        </span>
        <a class="list-group-item" url="article_list.html" href="#">
            <span class="glyphicon glyphicon-menu-right"> </span> 文章管理
        </a>
        <a class="list-group-item" url="category_list.html" href="#">
            <span class="glyphicon glyphicon-menu-right"> </span> 文章分类
        </a>
        <a class="list-group-item" url="member_list.html" href="#">
            <span class="glyphicon glyphicon-menu-right"> </span> 会员管理
        </a>
    </div>
</div>
<!--内容区域-->
<div class="col-md-10">
    <iframe
            src="main.html"
            frameborder="0"
            scrolling="no"
            id="main-body"
            name="main-body"
            width="100%"
            height="480px"
            onload="setIFrameHeight(this)">
    </iframe>
</div>

<script src="static/js/jquery.js"></script>
<script src="static/js/bootstrap.js"></script>
<script>
    // 点击左侧菜单
    $('.list-group-item').click(function () {
        var url = $(this).attr('url');
        if (url) {
            $('.list-group-item').removeClass('active');
            $(this).addClass('active');
            $('#main-body').attr('src', url);
        }
    });

    //iframe高度自适应
    function setIFrameHeight(win) {
        if (document.getElementById) {
            if (win && !window.opera) {
                if (win.contentDocument && win.contentDocument.body.offsetHeight)
                    win.height = win.contentDocument.body.offsetHeight;
                else if (win.Document && win.Document.body.scrollHeight)
                    win.height = win.Document.body.scrollHeight;
            }
        }
    }
</script>
</body>
</html>